import QtQuick 2.7
import QtQuick.Window 2.15
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.5
import QtQuick.Templates 2.5 as T
import org.ukui.qqc2style.private 1.0 as StylePrivate
import ukui.menu 1.0 as MyTestMenu
import org.ukui.quick.items 1.0 as UkuiItems
import ukui.dtk 1.0 as D

T.Menu {
    id: control
//    StylePrivate.APPParameter{
//        id: appP
//    }
//    palette: app.palette
//    font: app.font

    implicitWidth: Math.max(background ? background.implicitWidth : 0,
                            contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
    implicitHeight: Math.max(background ? background.implicitHeight : 0,
                             contentItem ? contentItem.implicitHeight : 0) + topPadding + bottomPadding

    margins: 0

//    leftPadding: menu.leftRightPadding
//    rightPadding: menu.leftRightPadding
//    topPadding: menu.topBottomPadding
//    bottomPadding: menu.topBottomPadding
    property var maxW: 0
    onVisibleChanged: {
        console.log("DTK onvisible changed...", visible, width, height, x, y, parent, parent.x, parent.y)
        if(parent)
        {
         console.log("maptoglobale...", parent.mapToGlobal(x, y))
            popHandle.setPosiion(parent.mapToGlobal(x, y).x, parent.mapToGlobal(x, y).y)
        }
        if(visible){
            popHandle.open()
        }
        else
            popHandle.close()
    }

    D.PopupHandle{
        id: popHandle
        delegate: Window {
            width: control1.width
            height: control1.height
    //        blurControl: control
            flags: Qt.Popup
            id: popupwindow
    //        rootWindow: control
    //        visible: control.visible
            //Component.onCompleted: console.log("popupwindow visible...", visible)
            onVisibleChanged: {
                console.log("popupwindow onvisiblechanged 0000", visible, control1.visible, popHandle.isVisible(), control.contentModel, control1.contentModel)
                if(visible && !control1.visible)
                    control1.open()
                else if(!visible && control1.visible)
                    control.close()
                console.log("popupwindow onvisiblechanged 1111", visible, control1.visible, popHandle.isVisible(), control.contentModel, control1.contentModel)
            }
            Component.onCompleted: {
                for(var i = 0; i < control.contentModel.count; i++)
                {
                    control1.addItem(control.itemAt(i));
                }
            //control1.addItem()
            }

            T.Menu {
                visible: parent.visible
                id: control1
            //    StylePrivate.APPParameter{
            //        id: appP
            //    }
//                palette: app.palette
//                font: app.font

//                width: 100
//                height: 400
                implicitWidth: Math.max(background ? background.implicitWidth : 0,
                                        contentItem ? contentItem.implicitWidth + leftPadding + rightPadding : 0)
                implicitHeight: Math.max(background ? background.implicitHeight : 0,
                                         contentItem ? contentItem.implicitHeight : 0) + topPadding + bottomPadding

                margins: 0

//                leftPadding: menu.leftRightPadding
//                rightPadding: menu.leftRightPadding
//                topPadding: menu.topBottomPadding
//                bottomPadding: menu.topBottomPadding
                contentData: control.contentData
//                property var maxW: 0

            //    StylePrivate.UKUIMenu{
            //        id: uMenu
            //    }

                onVisibleChanged: {
                    console.log("window menu visible", visible, parent, parent.visible, popupwindow.visible, contentItem.visible, implicitWidth, implicitHeight)
                    parent.visible = visible
                    if(!visible && popHandle.isVisible())
                    {
                        popHandle.close()
                    }
                }
                onImplicitWidthChanged: {
                    console.log("window menu onwidthchangedddd", width, height, implicitWidth, implicitHeight)

                    popHandle.setSize(implicitWidth, implicitHeight)
                }
                onImplicitHeightChanged: {
                    console.log("window menu onheightchangeddddd", width, height, implicitWidth, implicitHeight)
                    popHandle.setSize(implicitWidth, implicitHeight)
                }
                Component.onCompleted: {

                    console.log("window menu component size", width, height, implicitWidth, implicitHeight)
                    popHandle.setSize(implicitWidth, implicitHeight)
                }



                function getStartColor(dtcolor)
                {
                    return "red"
                }
                function getEndColor(dtcolor)
                {
                    return "blue"
                }

                delegate: MenuItem {

                }
                contentItem: ListView {
                    implicitHeight: contentHeight
                    property bool hasCheckables: false
                    property bool hasIcons: false
                    model: control1.contentModel

                    implicitWidth: {
                        var maxWidth = 0;
                        for (var l in control1.contentItem.contentItem.children) {
                            if(!(control1.contentItem.contentItem.children[l] instanceof MenuSeparator))
                            maxWidth = Math.max(maxWidth, control1.contentItem.contentItem.children[l].implicitWidth)
                        }

                       if(maxW === 0)
                        maxW = maxWidth

            //            control1.implicitWidth = Math.max(background ? background.implicitWidth : 0,
            //                                            contentItem ? maxW + control1.leftPadding + control1.rightPadding : 0)

                        return maxWidth;
                    }

                    //todo   why ApplicationWindow.window is null
                    interactive: Window.window ? contentHeight > Window.window.height : false
                    clip: interactive
                    currentIndex: control1.currentIndex || 0
                    keyNavigationEnabled: true
                    keyNavigationWraps: true

                    Component.onCompleted: {
                    console.log("window listview item visible...", visible, control1.contentItem )
                    }
                    onVisibleChanged: {
                    console.log("window listview item visiblechanged...", visible, width, height)
                    }
                    //Component.onCompleted: console.log("listview......", ApplicationWindow.window.height)

                    ScrollBar.vertical: ScrollBar {
                        id: scrollbar
                        active: hovered || pressed
                        visible: Window.window ? contentHeight > Window.window.height : false
                    }
                }

                Connections {
                    target: control1.contentItem.contentItem
                    function onChildrenChanged() {
                        var checkable = false;
                        var needIcon = false;
                        for (var i in control1.contentItem.contentItem.children) {
                            var child = control1.contentItem.contentItem.children[i];
                            if (child.checkable) {
                                control1.contentItem.hasCheckables = true;
                                checkable = true;
                            }
                            if (child.icon && child.icon.hasOwnProperty("name") && (child.icon.name.length > 0 || child.icon.source.toString().length > 0)) {
                                control1.contentItem.hasIcons = true;
                                needIcon = true;
                            }
                        }
                        if(checkable){
                            for (var k in control1.contentItem.contentItem.children) {
                                var childk = control1.contentItem.contentItem.children[k];
                                if(childk.hasOwnProperty("itemLeftSpace")){
                                    childk.itemLeftSpace = 20 + childk.leftPadding;
                                }
                            }
                        }
                        if(needIcon){
                            for (var j in control1.contentItem.contentItem.children) {
                                var childj = control1.contentItem.contentItem.children[j];
                                var b = childj.icon && childj.icon.hasOwnProperty("name") && (childj.icon.name.length > 0 || childj.icon.source.toString().length > 0);
                                if(childj.hasOwnProperty("labelLeftSpace"))
                                    childj.labelLeftSpace = b ? 4 : 20;
                            }
                        }
                        var maxWidth = 0;
                        for (var l in control1.contentItem.contentItem.children) {
                            if(!(control1.contentItem.contentItem.children[l] instanceof MenuSeparator))
                            maxWidth = Math.max(maxWidth, control1.contentItem.contentItem.children[l].implicitWidth)
                        }
                        for (var m in control1.contentItem.contentItem.children) {
                            control1.contentItem.contentItem.children[m].implicitWidth = maxWidth;
                        }

                    }
                }

                enter: Transition {
                    NumberAnimation {
                        property: "opacity"
                        from: 0
                        to: 1
                        easing.type: Easing.InOutQuad
                        duration: 150
                    }
                }

                exit: Transition {
                    NumberAnimation {
                        property: "opacity"
                        from: 1
                        to: 0
                        easing.type: Easing.InOutQuad
                        duration: 150
                    }
                }


//                StylePrivate.UKUIMenu{
//                    id: menu
//                }

//                StylePrivate.APPParameter{
//                    id: app
//                }


                background: Rectangle{
                anchors.fill: parent
                color: "green"
                opacity: 0.3

                }

            }



        }

    }


//    StylePrivate.UKUIMenu{
//        id: uMenu
//    }


//    StylePrivate.ParseInterface{
//        id: parseInterface
//    }

    function getStartColor(dtcolor)
    {
        return "red"//parseInterface.pStartColor(dtcolor)
    }
    function getEndColor(dtcolor)
    {
        return "blue"//parseInterface.pEndColor(dtcolor)
    }

    delegate: MenuItem {
    }
    contentItem: ListView {
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel

        /*
        implicitWidth: {
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }

            if(maxW === 0)
            maxW = maxWidth

//            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
//                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

            return maxWidth;
        }

        //todo   why ApplicationWindow.window is null
        interactive: Window.window ? contentHeight > Window.window.height : false
        clip: interactive
        currentIndex: control.currentIndex || 0
        keyNavigationEnabled: true
        keyNavigationWraps: true

        //Component.onCompleted: console.log("listview......", ApplicationWindow.window.height)

        ScrollBar.vertical: ScrollBar {
            id: scrollbar
            active: hovered || pressed
            visible: Window.window ? contentHeight > Window.window.height : false
        }
        */
    }

//    Connections {
//        target: control.contentItem.contentItem
//        function onChildrenChanged() {
//            var checkable = false;
//            var needIcon = false;
//            for (var i in control.contentItem.contentItem.children) {
//                var child = control.contentItem.contentItem.children[i];
//                if (child.checkable) {
//                    control.contentItem.hasCheckables = true;
//                    checkable = true;
//                }
//                if (child.icon && child.icon.hasOwnProperty("name") && (child.icon.name.length > 0 || child.icon.source.toString().length > 0)) {
//                    control.contentItem.hasIcons = true;
//                    needIcon = true;
//                }
//            }
//            if(checkable){
//                for (var k in control.contentItem.contentItem.children) {
//                    var childk = control.contentItem.contentItem.children[k];
//                    if(childk.hasOwnProperty("itemLeftSpace")){
//                        childk.itemLeftSpace = 20 + childk.leftPadding;
//                    }
//                }
//            }
//            if(needIcon){
//                for (var j in control.contentItem.contentItem.children) {
//                    var childj = control.contentItem.contentItem.children[j];
//                    var b = childj.icon && childj.icon.hasOwnProperty("name") && (childj.icon.name.length > 0 || childj.icon.source.toString().length > 0);
//                    if(childj.hasOwnProperty("labelLeftSpace"))
//                        childj.labelLeftSpace = b ? 4 : 20;
//                }
//            }
//            var maxWidth = 0;
//            for (var l in control.contentItem.contentItem.children) {
//                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
//                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
//            }
//            for (var m in control.contentItem.contentItem.children) {
//                control.contentItem.contentItem.children[m].implicitWidth = maxWidth;
//            }
//        }
//    }



}







/*
T.Menu{
    id: control
    implicitWidth: 100//contentItem.implicitWidth + leftPadding + rightPadding
    implicitHeight: 200//contentItem.implicitHeight + topPadding + bottomPadding

    background: Item{
        anchors.fill: parent
        MyTestMenu.MyMenu{
        id: back

        Component.onCompleted: {
            console.log("menu background component...", control.contentItem)

//            console.log("Menu....", control.width, control.height)
            back.setWidth(control.width)
            back.setHeight(control.height)
            back.setContent(control.contentModel)
//            back.setMenuDelegate(control.delegate);
        }
    }
    }



    delegate: MenuItem {
        //visible: false
        Component.onCompleted: console.log("TestMenu MenuItemmmmmm")
    }
    contentItem: ListView {
        id: listview
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel
        implicitWidth: {
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                    maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }

//            if(maxW === 0)
//                maxW = maxWidth

            //            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
            //                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

            return maxWidth;
        }
}


    onVisibleChanged: {
        if(visible)
            back.open();
        else
            back.close();
    }

    Component.onCompleted: {
        console.log("Menu component....", control.implicitWidth, control.width, control.height, control.visible)

        console.log("menu contentItem...", control.contentItem, control.contentModel, control.contentModel.count)
        back.setWidth(control.width)
        back.setHeight(control.height)
        back.setContent(control.contentModel)
//        back.setMenuDelegate(control.delegate);
        back.setCurrentIndex(control.currentIndex)
        if(control.visible)
            back.open();
    }
//    onContentItemChanged: {
//        console.log("onContentItemChanged...", control.contentItem)
//        back.setContent(listview.model)
//    }
    onCurrentIndexChanged: back.setCurrentIndex(control.currentIndex)
    onWidthChanged: {
        console.log("onwidthchangeddddd", control.implicitWidth, control.width, control.height)
        back.setWidth(maxW)
    }
    onHeightChanged: {
        console.log("onHeightChanged ddd", control.width, control.height)
        back.setHeight(control.height)
    }

}

}
*/
/*
T.Menu {
    id: control
    property var maxW: 0

//    StylePrivate.APPParameter{
//        id: appP
//    }
    palette: app.palette
    font: app.font

    implicitWidth: 100//contentItem.implicitWidth + leftPadding + rightPadding
    implicitHeight: 200//contentItem.implicitHeight + topPadding + bottomPadding

    margins: 0

    leftPadding: menu.leftRightPadding
    rightPadding: menu.leftRightPadding
    topPadding: menu.topBottomPadding
    bottomPadding: menu.topBottomPadding

//    StylePrivate.UKUIMenu{
//        id: uMenu
//    }


//    StylePrivate.ParseInterface{
//        id: parseInterface
//    }

//    function getStartColor(dtcolor)
//    {
//        return parseInterface.pStartColor(dtcolor)
//    }
//    function getEndColor(dtcolor)
//    {
//        return parseInterface.pEndColor(dtcolor)
//    }

//    delegate: MenuItem {
//        //visible: false
//        Component.onCompleted: console.log("TestMenu MenuItemmmmmm")
//    }
    contentItem: ListView {
        id: listview
        implicitHeight: contentHeight
        property bool hasCheckables: false
        property bool hasIcons: false
        model: control.contentModel
//        onModelChanged: {
////            control.update();
//            back.setContent(control.contentItem)
//        }

//        implicitWidth: {
//            var maxWidth = 0;
//            for (var l in control.contentItem.contentItem.children) {
//                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
//                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
//            }

//            if(maxW === 0)
//            maxW = maxWidth

////            control.implicitWidth = Math.max(background ? background.implicitWidth : 0,
////                                            contentItem ? maxW + control.leftPadding + control.rightPadding : 0)

//            return maxWidth;
//        }

        //todo   why ApplicationWindow.window is null
        interactive: Window.window ? contentHeight > Window.window.height : false
        clip: interactive
        currentIndex: control.currentIndex || 0
        keyNavigationEnabled: true
        keyNavigationWraps: true

        //Component.onCompleted: console.log("listview......", ApplicationWindow.window.height)

        ScrollBar.vertical: ScrollBar {
            id: scrollbar
            active: hovered || pressed
            visible: Window.window ? contentHeight > Window.window.height : false
        }
        //visible: false

        onModelChanged:{
            console.log("listview modelchangeddddd...", listview.model)
            back.setContent(listview.model)
        }
    }
//    onDelegateChanged: back.setMenuDelegate(control.delegate);

    Connections {
        target: control.contentItem.contentItem
        function onChildrenChanged() {
            var checkable = false;
            var needIcon = false;
            for (var i in control.contentItem.contentItem.children) {
                var child = control.contentItem.contentItem.children[i];
                if (child.checkable) {
                    control.contentItem.hasCheckables = true;
                    checkable = true;
                }
                if (child.icon && child.icon.hasOwnProperty("name") && (child.icon.name.length > 0 || child.icon.source.toString().length > 0)) {
                    control.contentItem.hasIcons = true;
                    needIcon = true;
                }
            }
            if(checkable){
                for (var k in control.contentItem.contentItem.children) {
                    var childk = control.contentItem.contentItem.children[k];
                    if(childk.hasOwnProperty("itemLeftSpace")){
                        childk.itemLeftSpace = 20 + childk.leftPadding;
                    }
                }
            }
            if(needIcon){
                for (var j in control.contentItem.contentItem.children) {
                    var childj = control.contentItem.contentItem.children[j];
                    var b = childj.icon && childj.icon.hasOwnProperty("name") && (childj.icon.name.length > 0 || childj.icon.source.toString().length > 0);
                    if(childj.hasOwnProperty("labelLeftSpace"))
                        childj.labelLeftSpace = b ? 4 : 20;
                }
            }
            var maxWidth = 0;
            for (var l in control.contentItem.contentItem.children) {
                if(!(control.contentItem.contentItem.children[l] instanceof MenuSeparator))
                maxWidth = Math.max(maxWidth, control.contentItem.contentItem.children[l].implicitWidth)
            }
            for (var m in control.contentItem.contentItem.children) {
                control.contentItem.contentItem.children[m].implicitWidth = maxWidth;
            }
            maxW = maxWidth;
//            console.log("control implicitwidth...", control.implicitWidth)
        }
    }

    enter: Transition {
        NumberAnimation {
            property: "opacity"
            from: 0
            to: 1
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }

    exit: Transition {
        NumberAnimation {
            property: "opacity"
            from: 1
            to: 0
            easing.type: Easing.InOutQuad
            duration: 150
        }
    }

//    background: Rectangle{
//        anchors.fill: parent
//        color: "red"
//    }

    background: Item{
        anchors.fill: parent
        MyTestMenu.MyMenu{
        id: back

        Component.onCompleted: {
            console.log("menu background component...", control.contentItem)

//            console.log("Menu....", control.width, control.height)
            back.setWidth(control.width)
            back.setHeight(control.height)
            back.setContent(listview.model)
//            back.setMenuDelegate(control.delegate);
        }
    }
    }
    onVisibleChanged: {
        if(visible)
            back.open();
        else
            back.close();
    }
    StylePrivate.UKUIMenu{
        id: menu
    }

    StylePrivate.APPParameter{
        id: app
    }
    Component.onCompleted: {
        console.log("Menu component....", control.implicitWidth, control.width, control.height, control.visible)

        console.log("menu contentItem...", control.contentItem, control.contentModel, control.contentModel.count)
        back.setWidth(maxW)
        back.setHeight(control.height)
        back.setContent(listview.model)
//        back.setMenuDelegate(control.delegate);
        back.setCurrentIndex(control.currentIndex)
        if(control.visible)
            back.open();
    }
//    onContentItemChanged: {
//        console.log("onContentItemChanged...", control.contentItem)
//        back.setContent(listview.model)
//    }
    onCurrentIndexChanged: back.setCurrentIndex(control.currentIndex)
    onWidthChanged: {
        console.log("onwidthchangeddddd", control.implicitWidth, control.width, control.height)
        back.setWidth(maxW)
    }
    onHeightChanged: {
        console.log("onHeightChanged ddd", control.width, control.height)
        back.setHeight(control.height)
    }
}

*/
